<template>
  <y-dialog @open="open" @close="emit('close')" width="1000px" append-to-body>
    <el-form
      ref="addRef"
      :model="form"
      :rules="rules"
      size="default"
      label-width="120px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="字段名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入字段名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字段别名" prop="sdx">
            <el-input v-model="form.sdx" placeholder="请输入sdx别名" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="字段类型" prop="type">
            <y-select
              v-model="form.type"
              placeholder="请选择字段类型"
              :options="rms_field_type"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字段长度" prop="length">
            <el-input-number
              v-model="form.length"
              placeholder="请输入字段长度"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="过滤条件" prop="tshark">
            <el-input
              v-model="form.tshark"
              placeholder="请输入TShark过滤条件"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="字段描述" prop="desc">
            <el-input v-model="form.desc" placeholder="请输入字段描述" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否解析" prop="isjx">
            <y-radio v-model="form.isjx" :options="sys_yes_no" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否通联" prop="istl">
            <y-radio v-model="form.istl" :options="sys_yes_no" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否筛选" prop="issx">
            <y-radio v-model="form.issx" :options="sys_yes_no" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字段状态" prop="status">
            <y-radio v-model="form.status" :options="sys_enable_disable" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <y-editor
              editorId="editorProtocolFieldRemark"
              v-model="form.remark"
              placeholder="请输入备注信息"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="标签" prop="tags">
            <y-tag v-model="form.tags" :closable="true" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
        <el-button @click="emit('close')">取消</el-button>
      </div>
    </template>
  </y-dialog>
</template>

<script setup name="AuField">
const route = useRoute();
const { proxy } = getCurrentInstance();
const { sys_yes_no, sys_enable_disable, rms_field_type } = proxy.useDict(
  "sys_yes_no",
  "sys_enable_disable",
  "rms_field_type"
);

const emit = defineEmits(["submited", "close"]);

const data = reactive({
  form: {},
  queryParams: {
    product: route.query.product,
    protocol: route.query.protocol,
    page: 1,
    limit: 10,
  },
  rules: {
    name: [{ required: true, message: "字段名称不能为空", trigger: "blur" }],
    isjx: [
      { required: true, message: "字段是否解析不能为空", trigger: "blur" },
    ],
    istl: [
      { required: true, message: "字段是否通联不能为空", trigger: "blur" },
    ],
    issx: [
      { required: true, message: "字段是否筛选不能为空", trigger: "blur" },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);

const props = defineProps({
  id: { type: String, default: "" },
  mode: { type: String, default: "Z" },
  operate: { type: String, default: "add" },
  getMethod: { type: Function, default: undefined },
  addMethod: { type: Function, default: undefined },
  updateMethod: { type: Function, default: undefined },
});

/** 更新标签方法 */
function handleTagsUpdate(data) {
  form.value.tags = data;
}

/** 打开对话框事件 */
function open() {
  switch (props.operate) {
    case "update":
      props.getMethod(props.id).then((res) => {
        form.value = res.data;
      });
      break;
    default:
      reset();
      break;
  }
}

/** 重置Form方法 */
function reset() {
  form.value = {
    isjx: "Y",
    istl: "N",
    issx: "N",
    sort: 0,
    status: "0",
  };
  proxy.resetForm("addRef");
}

/** 提交按钮事件 */
function submit() {
  proxy.$refs["addRef"].validate((valid) => {
    if (valid) {
      form.value.product = queryParams.value.product;
      form.value.protocol = queryParams.value.protocol;
      if (form.value.id != undefined) {
        props.updateMethod(form.value).then((res) => {
          proxy.$modal.msgSuccess("修改成功");
          submited();
        });
      } else {
        props.addMethod(form.value).then((res) => {
          proxy.$modal.msgSuccess("新增成功");
          submited();
        });
      }
    }
  });
}

/** submited事件 */
function submited() {
  emit("submited");
  emit("close");
}
</script>
